<template>
	<view class="index ">
		<view scroll-y="true" class="scroll-Y custom-tabbar-page" @scrolltolower="lower">
			<homeCom ref="homeCom" v-show="currentIndex === 0" :isScrolled="isScrolled" :isChanged="isChanged"
				:isShowTimelimited="isShowTimelimited" @getCeilingData="getCeilingData"
				@getCeilingChangeData="getCeilingChangeData" @gridTitleListFn="gridTitleListFn"
				@ScrollPosition="ScrollPosition"></homeCom>
			<mainCom v-show="currentIndex === 1" ref="mainRef"></mainCom>
			<myCom v-show="currentIndex === 4"></myCom>
		</view>

		<view class="tn-skeleton tn-skeleton-fillet">
			<tn-tabbar @change="handleTabbar" :shadow="false" v-model="currentIndex" :safeAreaInsetBottom="true"
				:height="tabbarHeight" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
				activeIconColor="tn-cool-bg-color-7" :animation="true" v-if="showTabbar"></tn-tabbar>
		</view>

		<tn-skeleton :show="showSkeleton"></tn-skeleton>

	</view>
</template>

<script>
	import store from '@/store/index.js'

	import homeCom from './home.vue';
	import mainCom from './main.vue';
	import myCom from './my.vue';

	import xingzuCom from '../users/xingzu/index.vue';

	export default {
		components: {
			homeCom,
			mainCom,
			myCom,
			xingzuCom
		},
		data() {
			return {
				tabbarHeight: 110,
				showSkeleton: true,
				currentIndex: 0,
				showTabbar: true,
				scrollHeight: 800,
				title: 'Hello',
				list: [{
					text: '分享'
				}],
				tabbarList: [{
						title: '首页',
						activeIcon: '/static/tabbar/homepageSelection.png',
						inactiveIcon: '/static/tabbar/homepage.png',
						iconSize: 52,
						activeColor: '#FE0000',
					},

					{
						title: '消息',
						activeIcon: '/static/tabbar/messageSelection.png',
						inactiveIcon: '/static/tabbar/message.png',
						iconSize: 52,
						activeColor: '#FE0000',
						// activeIconColor: '#FFFFFF',
						// inactiveIconColor: '#FFFFFF',
						// iconSize: 50,
						// out: true
					},
					{
						title: '星族圈',
						activeIcon: '/static/tabbar/xingzu.png',
						inactiveIcon: '/static/tabbar/xingzu.png',
						iconSize: 52,
						activeColor: '#FE0000',
					},
					{
						title: '购物车',
						activeIcon: '/static/tabbar/shoppingCartSelection.png',
						inactiveIcon: '/static/tabbar/shoppingCart.png',
						iconSize: 52,
						activeColor: '#FE0000',
					},
					{
						title: '我的',
						activeIcon: '/static/tabbar/mySelection.png',
						inactiveIcon: '/static/tabbar/my.png',
						iconSize: 52,
						activeColor: '#FE0000',
					}
				],
				isScrolled: false,
				isChanged: false,
				isShowTimelimited: false,
				timeUpDistance: (store.state.FirstTimeActivy[0]?.pData?.top - uni.upx2px(60)) || Infinity,
				changeUpDistance: (store.state.GridTitleList[0]?.pData?.top - uni.upx2px(150)) || Infinity,
				changeHeight: 0,
				nowGeting: false,
				gridTitleList: [],
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// #ifdef APP-PLUS
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/index/index"
				});
				uni.stopPullDownRefresh();
			}, 1000)
			// #endif
		},
		onReady() {
			let that = this

		},
		mounted() {

		},
		computed: {
			pageTitle() {
				return this.tabbarList[this.currentIndex].title
			},
			heHeight() {
				let num = 0;
				return num;
			}
		},
		onReachBottom() {

		},
		watch: {
			nowGeting(newVal) {
				// this.$nextTick(() => {
					this.$refs.homeCom.getTopNumber(this)
				// })
			}
		},
		onShow() {
			const currentIndex = uni.getStorageSync('currentIndex')
			if (currentIndex !== undefined || currentIndex !== null || currentIndex !== '') {
				this.currentIndex = 0
			}
			uni.removeStorageSync('currentIndex')
		},
		mounted() {

			let indexHeight = 0
			// #ifdef MP-WEIXIN
			this.marginTop = this.vuex_custom_bar_height
			indexHeight = 40
			// #endif

			// #ifdef APP-PLUS || APP
			this.marginTop = this.vuex_custom_bar_height
			indexHeight = 20
			// #endif

			// #ifdef H5
			this.marginTop = this.vuex_custom_bar_height + this.vuex_status_bar_height
			indexHeight = 50
			// #endif

			store.commit('$tStore', {
				name: 'vuex_custom_scroll_height',
				value: this.scrollHeight
			})

			store.commit('$tStore', {
				name: 'vuex_padding_top',
				value: this.marginTop
			})
			store.commit('$tStore', {
				name: 'vuex_custom_index_height',
				value: this.indexHeight
			})


			setTimeout(() => {
				this.showSkeleton = false
			}, 1000)
		},
		methods: {
			ScrollPosition(id) {
				let gridTitleList = store.state.GridTitleList
				let scrollTop = gridTitleList.find(item => item.id === id).pData.top
				console.log('scrollTop', scrollTop);
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: scrollTop - uni.upx2px(130),
						duration: 300,
						complete() {
							setTimeout(() => {
								store.commit('CHANGE_SWITCH_STATE', false)
							}, 400)
						}
					})
				}, 50)
			},
			gridTitleListFn(data) {
				this.gridTitleList = data
			},
			getCeilingData(value) {
				// this.timeUpDistance = value.top - uni.upx2px(60)
			},
			getCeilingChangeData(value) {
				// this.changeUpDistance = value.top - uni.upx2px(150)
				this.changeHeight = value.height
			},
			handleTabbar(index) {
				this.currentIndex = index;
				if (index === 2) {
					uni.navigateTo({
						url: '/pages/users/xingzu/index'
					})
				}
			},
			click(index) {

			},
			// 滚动到底部
			lower() {

			},
			// 监听滚动
			scrollEvt(e) {
				console.log(e)
				// // 防抖
				// if(this.timer){
				//   clearTimeout(this.timer);
				// }
				// this.timer = setTimeout(()=>{
				//
				// },500);
			},
		},
		onPageScroll(e) {
			// 滚动监听
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			let timeUpDistance = (store.state.FirstTimeActivy[0]?.pData?.top) || Infinity
			let changeUpDistanceOne = (store.state.GridTitleList[0]?.pData?.top - uni.upx2px(150)) || Infinity
			let changeUpDistance = (store.state.GridTitleList) || []
			// console.log('timeUpDistance', timeUpDistance);
			// console.log('changeUpDistance', changeUpDistance);
			uni.$emit('scroll');
			this.nowGeting = true
			if (e.scrollTop > 50) {
				this.isScrolled = true;
				//this.isFixed = true;
			}
			if (e.scrollTop < 50) {
				this.$nextTick(() => {
					//this.isFixed = false;
					this.isScrolled = false;
				});
			}
			if (e.scrollTop > timeUpDistance) {
				this.isShowTimelimited = true;
			}
			if (e.scrollTop < timeUpDistance) {
				this.$nextTick(() => {
					//this.isFixed = false;
					this.isShowTimelimited = false;
				});
			}
			if (e.scrollTop > changeUpDistanceOne) {
				this.isChanged = true;
			}
			if (e.scrollTop < changeUpDistanceOne) {
				this.$nextTick(() => {
					//this.isFixed = false;
					this.isChanged = false;
				});
			}
			if (changeUpDistance.length) {
				const scrollTop = e.scrollTop;

				changeUpDistance.forEach((item, index) => {
					const itemTop = item.pData.top - uni.upx2px(150);
					const prevItemTop = index > 0 ? changeUpDistance[index - 1].pData.top - uni.upx2px(150) : null;
					const nextItemTop = index < changeUpDistance.length - 1 ? changeUpDistance[index + 1]
						.pData.top - uni.upx2px(150) : null;

					if (
						index > 0 &&
						scrollTop > itemTop &&
						(prevItemTop === null || scrollTop > prevItemTop) &&
						(nextItemTop === null || scrollTop < nextItemTop)
					) {
						if (store.state.switchState) return
						// console.log('切换tab', item.name, index);
						this.$refs.homeCom.changeNameIndex(index)
					}
				});
			}
		}
	}
</script>

<style>
	.wrapper {
		height: auto !important;
	}

	.index {
		overflow: hidden;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.home-search {
		background-color: #fff !important;
		z-index: 2;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.custom-tabbar-page {
		/* height: calc(100vh - (100rpx + env(safe-area-inset-bottom))); */
		background-color: #f8f8f8;
	}
</style>